<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href="<%=contextPath%>/bootstrap3/css/bootstrap.min.css" rel="stylesheet">
    <link rel='stylesheet' href='<%=contextPath%>/css/kendo/2018.1.221/kendo.common.min.css' />
    <link rel='stylesheet' href='<%=contextPath%>/css/kendo/2018.1.221/kendo.metro.min.css' />
    <link rel='stylesheet' href='<%=contextPath%>/css/kendo/2018.1.221/kendo.metro.mobile.min.css' />
    <link rel='stylesheet' href='<%=contextPath%>/css/style.css' />

	<script type="text/javascript" src="<%=contextPath%>/js/kendo/2018.1.221/jquery.min.js"></script>
	<script type="text/javascript" src="<%=contextPath%>/bootstrap3/js/bootstrap.min.js"></script>

	<script type="text/javascript" src="<%=contextPath%>/js/kendo/2018.1.221/kendo.all.min.js"></script>
	<script type="text/javascript" src="<%=contextPath%>/js/kendo.extends.js"></script>
	<script type="text/javascript" src="<%=contextPath%>/js/admin.js"></script>
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
	<div id="grid" style="border:1px solid #ddd"></div>
    
    <script type="text/javascript">
        var sex = [{text:'男',value:1},{text:'女',value:2}]

		$("#grid").kendoGrid({
            columns: [ {
            		title: "序号",
            		width: "80px",
            		field: "Id",
            		encoded: false,
            		attributes:{ 'class':'center'},
					filterable:false,
					sortable:false,
					template: "<span class='row-number'></span>"
            	},
            	{
                    title: "用户编号",
                    width: "150px",
                    field: "Code",
                    encoded: false,
                    attributes: {
                        'class': 'center'
                    }
                },
                {
                    title: "登录名",
                    width: "15%",
                    field: "LoginName",
                    encoded: false,
                    attributes: {
                        'class': 'left'
                    }
                },
                {
                    title: "真实姓名",
                    width: "15%",
                    field: "UserName",
                    encoded: false,
                    attributes: {
                        'class': 'left'
                    }
                },
                {
                    title: "所属机构",
                    width: "20%",
                    field: "OrganizationName",
                    encoded: false,
                    attributes: {
                        'class': 'left'
                    }
                },
                {
                    title: "性别",
                    width: "20%",
                    field: "Gender",
                    encoded: false,
                    attributes: {
                        'class': 'center'
                    },
                    values:sex
                },
                {
                    title: "性别TE",
                    width: "20%",
                    field: "Gender",
                    encoded: false,
                    attributes: {
                        'class': 'center'
                    },
                    template:  "# if (Gender == 1) { #" +  
                    "<span>男</span>" +  
                    "# }else{ #"+
                    "<span>女</span> # } #"
                },
                {
                    title: "电话",
                    width: "20%",
                    field: "Tel",
                    encoded: false,
                    attributes: {
                        'class': 'left'
                    }
                },
                {
                    title: "邮箱",
                    width: "20%",
                    field: "Email",
                    encoded: false,
                    attributes: {
                        'class': 'left'
                    }
                },
                {
                    title: "用户角色",
                    width: "20%",
                    field: "RoleName",
                    encoded: false,
                    attributes: {
                        'class': 'left'
                    }
                },
                {
                    title: "创建时间",
                    width: "25%",
                    field: "CreateTime",
                    encoded: false,
                    attributes: {
                        'class': 'left'
                    },
                    format:'{0:yyyy-MM-dd HH:mm:ss}'
                }
            ],
            page: 1,
			filterable: true,
	        selectable: "Multiple, Row",
	        scrollable: true,
	        sortable:true,
	        resizable:true,
			pageable: {
				refresh: true,
				autoBind: false,
				input: true,
				buttonCount: 10,
				pageSizes: [5,10,20,50,100]
			},
            autoBind: true,
            //向服务器发送ajax请求，返回的数据对应每个字段的值
            dataSource: createDataSource('<%=contextPath%>/userList', {
                LoginName: { type: "string" },
                UserName: { type: "string" },
                OrganizationId: { type: "number" },
                Gender: { type: "number" },
                Tel: { type: "string" },
                Email: { type: "string" },
                RoleName: { type: "string" },
                Code: { type: "string" },
                CreateTime:{type: "date", parse: function(value) { return new Date(value);}}
            }),
            dataBound: function() {
				var rows = this.items();  
                var page = this.pager.page() - 1;  
                var pagesize = this.pager.pageSize();  
                $(rows).each(function () {  
                    var index = $(this).index() + 1 + page * pagesize;  
                    var rowLabel = $(this).find(".row-number");  
                    $(rowLabel).html(index);  
                });  	
            }
        });
	</script>
  </body>
</html>
